<template>
  <hsa-dialog v-model:visible="dialogVisible" title="查询服务" width="750">
    <!-- 对话框内容 -->
    <el-form
      ref="formRef"
      :model="formData"
      :rules="formRules"
      label-width="120px"
    >
      <el-row>
        <el-col :span="24">
          <el-form-item label="服务接口名称" prop="serviceInterfaceName">
            <el-input v-model="formData.serviceInterfaceName" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="服务接口编码" prop="serviceInterfaceCode">
            <el-input v-model="formData.serviceInterfaceCode" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="接口唯一标识" prop="interfaceUniqueId">
            <el-input v-model="formData.interfaceUniqueId" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="API" prop="api">
            <el-input v-model="formData.api" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="密码" prop="password">
            <el-input v-model="formData.password" type="password" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="服务接口描述" prop="serviceInterfaceDesc">
            <el-input v-model="formData.serviceInterfaceDesc" type="textarea" />
          </el-form-item> </el-col
      ></el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="json调试" prop="jsonDebug">
            <el-input v-model="formData.jsonDebug" type="textarea" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <hsa-adaptive-pane>
      <hsa-title-pane fill>
        <hsa-title-pane-item title="" fill>
          <template #title-suffix
            ><span class="required-item">*</span>数据目录</template
          >
          <template #toolbar>
            <el-button type="primary" @click="selectDirectory"
              >选择数据目录</el-button
            >
          </template>
          <hsa-table v-bind="dataDirectoryTableOption"></hsa-table>
        </hsa-title-pane-item>
      </hsa-title-pane>
    </hsa-adaptive-pane>
    <hsa-adaptive-pane>
      <hsa-title-pane fill>
        <hsa-title-pane-item title="输入参数" fill>
          <hsa-table v-bind="inputTableOption"></hsa-table>
        </hsa-title-pane-item>
      </hsa-title-pane>
    </hsa-adaptive-pane>
    <hsa-adaptive-pane>
      <hsa-title-pane fill>
        <hsa-title-pane-item title="输出参数" fill>
          <hsa-table v-bind="outPutTableOption"></hsa-table>
        </hsa-title-pane-item>
      </hsa-title-pane>
    </hsa-adaptive-pane>
    <!-- 对话框底部按钮 -->
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSubmit">确定</el-button>
      </span>
    </template>
    <data-directory-popup ref="dataDirectoryPopupRef"></data-directory-popup>
  </hsa-dialog>
</template>

<script setup lang="ts">
import { ref, reactive, h } from "vue";
import type { HsaTableColumn } from "hsa-ui";
import {
  dataDirectoryColumns,
  serviceFormRules,
  inputTableOptionColumns,
  outPutTableOptionData,
  outPutTableOptionColumns
} from "./directory/index";
import dataDirectoryPopup from "./service-popup-component/data-directory.vue";
// 控制对话框的显示与隐藏
const dialogVisible = ref(false);
const dataDirectoryPopupRef = ref(null);
const selectDirectory = () => {
  console.log(dataDirectoryPopupRef, 978777);
  dataDirectoryPopupRef.value.open();
};
// 表单数据
const formData = reactive({
  serviceInterfaceName: "",
  serviceInterfaceCode: "",
  interfaceUniqueId: "",
  api: "",
  password: "",
  serviceInterfaceDesc: "",
  jsonDebug: "",
});
/**
 * 表单校验规则
 */
const formRules = reactive(serviceFormRules);

/**
 * 表格配置-输入参数
 */
const inputTableOption = reactive({
  showIndex: true,
  data: ref<any[]>([
    { paramterName: "", required: "", type: "", paramterDescription: "" },
  ]),
  columns: ref<HsaTableColumn[]>(inputTableOptionColumns),
  paginationEnable: false,
});
/**
 * 表格配置-数据目录
 */
const dataDirectoryTableOption = reactive({
  showIndex: true,
  data: ref<any[]>([]),
  columns: ref<HsaTableColumn[]>(dataDirectoryColumns),
  paginationEnable: false,
});
/**
 * 表格配置-输出参数
 */
const outPutTableOption = reactive({
  showIndex: true,
  data: ref<any[]>(outPutTableOptionData),
  columns: ref<HsaTableColumn[]>(outPutTableOptionColumns),
  paginationEnable: false,
});
// 提交表单时的处理函数
const handleSubmit = () => {
  console.log("表单数据:", formData);
  // 提交表单后关闭对话框
  dialogVisible.value = false;
};
const open = () => {
  dialogVisible.value = true;
};
defineExpose({
  open,
});
</script>
<style scoped>
.required-item {
  color: #f56c6c;
  margin-right: 4px;
}
</style>
